<template>
	<view>
		<uni-popup ref="addressPopup" type="center" :mask-click="false">
			<view class="address-modal">
				<view class="modal-header">{{isType===0?'新增':'修改'}}发票信息</view>
				<uni-icons type="closeempty" size="20" class="modal-icon" @click="closeModal"></uni-icons>
				<view class="modal-content">
					<uni-forms label-width="110px" ref="customForm" :rules="customRules" :modelValue="customFormData"
					label-align="right">
						<uni-forms-item label="类型" required name="type" v-if="isType===0">
							<radio-group @change="radioChange">
								<view>
									<radio color="#E91F1B" :value="1" :checked="1 === customFormData.type" />
									<text class="radioText">单位</text>
									<radio color="#E91F1B" :value="2" :checked="2 === customFormData.type" />
									<text>个人</text>
								</view>
								<!-- <view>{{item.name}}</view> -->
							</radio-group>
						</uni-forms-item>
						<uni-forms-item label="发票抬头" required name="title">
							<uni-easyinput maxlength="50" v-model="customFormData.title" placeholder="请输入发票抬头" />
						</uni-forms-item>
						<view v-if="customFormData.type===1">
							<uni-forms-item label="纳税人识别号" required name="number">
								<uni-easyinput v-model="customFormData.number" placeholder="请输入纳税人识别号" />
							</uni-forms-item>
							<uni-forms-item label="注册地址" required name="address">
								<uni-easyinput v-model="customFormData.address" placeholder="请输入注册地址" />
							</uni-forms-item>
							<uni-forms-item label="注册电话" required name="tel">
								<uni-easyinput v-model="customFormData.tel" placeholder="请输入注册电话" />
							</uni-forms-item>
							<uni-forms-item label="开户银行" required name="blank">
								<uni-easyinput v-model="customFormData.blank" placeholder="请输入开户银行" />
							</uni-forms-item>
							<uni-forms-item label="银行账户" required name="blank_number">
								<uni-easyinput v-model="customFormData.blank_number" placeholder="请输入银行账户" />
							</uni-forms-item>
						</view>

					</uni-forms>

					<view class="button-group">
						<button class="btn cancel" @click="closeModal">取消</button>
						<button class="btn confirm" @click="submit('customForm')">确定</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "modifyInvoice",
		data() {
			return {
				invoiceCloud: null,
				isType: 0, // 是否展示类别 0展示所有 1展示企业  2展示个人
				// 自定义表单数据
				customFormData: {
					type: 1, // 类型（默认公司）
					title: '', // 发票抬头
					number: '', // 纳税人识别号
					address: '', // 注册地址
					tel: '', // 注册电话
					blank: '', // 开户银行
					blank_number: '', // 银行账户
				},
				// 校验规则
				customRules: {
					type: {
						rules: [{
							required: true,
							errorMessage: '请选择发票类型'
						}]
					},
					title: {
						rules: [{
							required: true,
							errorMessage: '请输入发票抬头'
						}]
					},
					number: {
						rules: [{
							required: true,
							errorMessage: '请输入纳税人识别号'
						}]
					},
					address: {
						rules: [{
							required: true,
							errorMessage: '请输入注册地址'
						}]
					},
					tel: {
						rules: [{
							required: true,
							errorMessage: '请输入注册电话'
						}]
					},
					blank: {
						rules: [{
							required: true,
							errorMessage: '请输入开户银行'
						}]
					},
					blank_number: {
						rules: [{
							required: true,
							errorMessage: '请输入银行账户'
						}]
					},
				},

			};
		},
		mounted() {
			this.invoiceCloud = uniCloud.importObject('invoice');
		},
		methods: {
			// 切换个人 和 单位选项
			radioChange(evt) {
				this.customFormData.type = evt.detail.value
			},
			// 省市县选项变化
			// onchange(e) {
			// 	const value = e.detail.value
			// 	console.log(e.detail.value)
			// 	console.log('00:', this.customFormData.classes)
			// },
			// 点击省市县选项
			// onnodeclick(node) {
			// 	// console.log('00:', this.customFormData.classes)
			// },

			// 打开修改发票弹窗
			openModal(val, obj) { // val  0为新增 1、单位发票 2、个人发票
				console.log(val)
				if (val) {
					this.customFormData.type = val;
					this.isType = val;
					this.customFormData = {
						...obj
					}
				} else {
					this.customFormData = {
						...obj
					}
					// this.customFormData.type = 1
					this.isType = 0
				}
				this.$refs.addressPopup.open();
			},
			// 关闭修改发票弹窗
			closeModal() {
				this.$refs.addressPopup.close();
			},
			// 提交表单
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					if (this.isType === 0) {
						this.addPersonalInvoice(this.customFormData) // 个人
					} else {
						this.updateInvoice(this.customFormData._id, this.customFormData)
					}

				}).catch(err => {
					console.log('err', err);
					uni.showToast({
						title: '请完善信息',
						icon: 'none'
					});
				})
			},


			// 添加个人发票
			async addPersonalInvoice(data) {
				try {
					const uid = uni.getStorageSync('login-userinfo')._id
					console.log('’uid：',uid)
					console.log('’data：',data)
					const res = await this.invoiceCloud.add(data, uid)
					uni.showToast({
						title: '添加成功',
						icon: 'success'
					})
					this.closeModal();
					// 通知父组件
					this.$emit('address-updated', 1);
					console.log('新增发票ID：', res.data)
					// 刷新列表
					// this.getInvoiceList()
				} catch (e) {
					console.log(e.message)
					uni.showToast({
						title: e.message || '添加失败',
						icon: 'none'
					})
				}
			},

			async updateInvoice(id, data) {
				console.log('data：：', data)
				try {
					const uid = uni.getStorageSync('login-userinfo')._id
					const res = await this.invoiceCloud.update(id, data, uid)
					if (res.success) {
						uni.showToast({
							title: '更新成功',
							icon: 'success'
						})
						this.closeModal();
						// 通知父组件
						this.$emit('address-updated', 1);
						// this.getInvoiceList() // 刷新列表
					}
				} catch (e) {
					uni.showToast({
						title: e.message || '更新失败',
						icon: 'none'
					})
				}
			},

			// async deleteInvoice(id,'121212') { // 删除
			//   uni.showModal({
			//     title: '提示',
			//     content: '确定要删除该发票吗？',
			//     success: async (confirmRes) => {
			//       if (confirmRes.confirm) {
			//         try {
			//           const res = await this.invoiceCloud.delete(id)
			//           if (res.success) {
			//             uni.showToast({
			//               title: '删除成功',
			//               icon: 'success'
			//             })
			//             this.getInvoiceList() // 刷新列表
			//           }
			//         } catch (e) {
			//           uni.showToast({
			//             title: e.message || '删除失败',
			//             icon: 'none'
			//           })
			//         }
			//       }
			//     }
			//   })
			// },

		}
	}
</script>

<style scoped>
	.address-modal {
		width: 500px;
		min-height: 200px;
		background: #fff;
		border-radius: 16px;
		/* padding: 30px 20px; */
		box-sizing: border-box;
		position: relative;
	}

	.modal-icon {
		position: absolute;
		top: 8px;
		right: 12px;
		cursor: pointer;
	}

	.modal-header {
		width: 100%;
		height: 40px;
		font-size: 14px;
		font-weight: 600;
		background-color: #F5F5F5;
		border-radius: 8px;
		padding: 0 16px;
		box-sizing: border-box;
		line-height: 40px;
		/* margin-bottom: 25px; */
		/* text-align: center; */
	}

	.modal-content {
		background-color: white;
		width: 100%;
		min-height: 160px;
		padding: 20px;
		box-sizing: border-box;
		border-radius: 8px;
	}

	.radioText {
		margin-right: 20px;
	}

	.modal-content /deep/ uni-radio-group {
		margin-top: 8px;
	}

	.modal-content /deep/ uni-radio:not([disabled]) .uni-radio-input {
		width: 16px;
		height: 16px;
	}

	.modal-content /deep/ uni-radio:not([disabled]) .uni-radio-input:hover {
		border-color: #E91F1B !important;
	}
	
	.modal-content /deep/ .uni-easyinput {
		width: 84%;
	}

	/* 按钮 */

	/* uni-button[type='primary'] {
		background-color: #D92400;
	} */

	.button-group {
		display: flex;
		justify-content: space-between;
		margin: 30px auto;
		margin-bottom: 0;
		width: 290px;
	}

	.btn {
		width: 25%;
		height: 30px;
		border-radius: 8px;
		font-size: 16px;
		line-height: 30px;
		font-size: 14px;
		/* margin-left: 60px; */
	}

	.btn.cancel {
		background: #f5f5f5;
		color: #333;
		/* margin-left: 120px; */
		/* margin-right: 20px; */
	}

	.btn.confirm {
		background: #E91F1B;
		color: #fff;
		margin-left: 0;
	}
</style>